<template>
	<view>
		<qi-navbar title="详情页"  lefticon="icon-icon-test59"></qi-navbar>
	<!-- 商品主图 -->
		<view class="mainPicBox">
			<image class="mainPic" :src="bookInfo.cover_url"></image>
		</view>
		<!-- 商品信息 -->
		<view class="proInfo">
			<view class="title">{{ bookInfo.title }}</view>
			<view class="priceAndSale">
				<text class="price">￥ {{ bookInfo.price }}</text>
				<text class="sales">销量: {{ bookInfo.sales }}</text>
			</view>
		</view>
		<qi-tabControl :titles="['商品详情', '商品品论', '推荐商品']" @tabClick="changeSort" />
	<!-- 富文本区域 -->
		<u-parse  v-if="current == 0"
			class="prodetail" :content="bookInfo.details"></u-parse>
		<!-- 评论区域 -->
		<view v-if="current == 1">
			<detailcomment :comment="comments"></detailcomment>
		</view>
		<!-- 推荐商品 -->
		<view v-if="current == 2" class="recommand">
			<goodscard :goods="commandList" />
		</view>
	</view>
</template>

<script>
	import {getGoodsDetail} from '@/https/API.js'
	export default {
		data() {
			return {
				// Tab显示
				current: 0,
				// 商品信息
				bookInfo: {
					// 默认数据(解决微信小程序短返回数据前undefined问题)
					title: '',
					sales: 0,
					price: 0
				},
				// 商品评论
				comments: [],
				// 推荐列表
				commandList: [],
		
				// 购物车商品数量
				cartProNum: 0
			}
		},
		onLoad({id}){
			this.getDetail(id)
		},
		methods: {
			getDetail(id){
				getGoodsDetail(id).then(res=>{
					// 详情信息
					this.bookInfo = res.data.goods;
					// 保存商品信息、评论列表、推荐列表
					this.comments = res.data.goods.comments;
					// 推荐商品 
					this.commandList = res.data.like_goods;
				})
			},
			// 切换Tab栏
			changeSort(index) {
				console.log(index);
				this.current = index;
			},
		}
	}
</script>

<style lang="scss" scoped>
	// 商品主图样式
	.mainPicBox {
		width: 100%;
		height: 500rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	
		.mainPic {
			height: 440rpx;
			width: 400rpx;
		}
	}
	
	// 商品信息样式
	.proInfo {
		padding: 10rpx 30rpx;
		border-bottom: 1px solid #eee;
	
		.title {
			font-size: 40rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}
	
		.priceAndSale {
			display: flex;
			justify-content: space-between;
	
			.price {
				font-size: 36rpx;
				color: red;
				font-weight: bold;
			}
	
			.sales {
				color: #999;
			}
		}
	}
// 商品详情样式
.prodetail {
	padding: 0 20rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #fff;
}
</style>
